/* eslint-disable react/jsx-key */
import React, { useState, useRef, useEffect } from 'react';
import { Image, Popconfirm, Tooltip, Modal, message, Alert } from 'antd';
import AutoTable from '@/components/AutoTable';
import { deletepaymentorder, companydetail, company, otherbusinesstake } from '@/services/business';
import { getFetch, postFetch } from '@/utils/doFetch';
import { connect, history } from 'umi';
import ProDescriptions from '@ant-design/pro-descriptions';
import { DownloadOutlined } from '@ant-design/icons';
import moment from 'moment';
import CompanyName from '@/components/CompanyName';

let valueEnum = {
  cache: {
    text: '暂存',
  },
  stalled: {
    text: '未开始',
  },
  dispatching: {
    text: '会计调度中',
  },
  dispatch_refuse: {
    text: '会计调度拒绝',
  },
  accounting: {
    text: '记账会计审核中',
  },
  account_refuse: {
    text: '记账会计拒绝',
  },
  account_cache: {
    text: '记账会计暂存',
  },
  completed: {
    text: '已完成',
  },
};

function Accountrenew(props) {
  const [vs, cvs] = useState(false), //表单显/隐
    [vis, cvis] = useState(false),
    [data, cd] = useState({}),
    [iftype, ciftype] = useState({}),
    {
      location: { query },
    } = props;

  let actionRef = useRef(),
    ChildRef = null,
    formRef = useRef();
  function reload() {
    actionRef?.current?.reload();
    ChildRef?.onRefresh();
  }
  const columns = [
    {
      title: '月份',
      dataIndex: 'month',
      key: 'month',
      valueType: 'dateMonth',
      hideInTable: true,
    },
    {
      title: '公司名称',
      width: 260,
      dataIndex: 'company_name',
      key: 'company_name',
      render: (_, row) => (
        <CompanyName
          row={{ ...row, name: row?.company_name ?? row.name, id: row?.company_id ?? row.id }}
          reload={reload}
        />
      ),
    },
    {
      title: '联系人',
      dataIndex: 'customer_name',
      key: 'customer_name',
      ellipsis: true,
    },
    {
      title: '联系人手机号',
      width: 120,
      dataIndex: 'customer_phone',
      key: 'customer_phone',
      render: (_, row) => (
        <Tooltip title={row.customer_phone}>
          <a href={`tel:${row.customer_phone}`} className="oneline">
            {row.customer_phone}
          </a>
        </Tooltip>
      ),
    },
    {
      title: '业务类型',
      dataIndex: 'service_type_name',
      key: 'service_type_name',
      search: false,
      hideInTable: true,
    },
    {
      title: '应收款',
      dataIndex: 'receivable',
      key: 'receivable',
      search: false,
    },
    {
      title: '月收费',
      dataIndex: 'unit_price',
      key: 'unit_price',
      hideInTable: true,
      search: false,
    },
    /*接口未返回 */
    {
      title: '区域名称',
      dataIndex: 'area_name',
      key: 'area_name',
      search: false,
    },
    {
      title: '服务开始时间',
      dataIndex: 'service_start_time',
      key: 'service_start_time',
      search: false,
    },
    {
      title: '服务结束时间',
      dataIndex: 'service_end_time',
      key: 'service_end_time',
      search: false,
    },
    {
      title: '接单人',
      dataIndex: 'user_name',
      key: 'user_name',
      search: false,
      hideInTable: true,
    },
    {
      title: '支付周期',
      dataIndex: 'payment_cycle_name',
      key: 'payment_cycle_name',
      search: false,
      hideInTable: true,
    },
    {
      title: '周期月数',
      dataIndex: 'cycle_num',
      key: 'cycle_num',
      search: false,
      hideInTable: true,
    },
    {
      title: '实际收款',
      dataIndex: 'actual_receive',
      key: 'actual_receive',
      search: false,
    },
    {
      title: '收款方式',
      dataIndex: 'payment_name',
      key: 'payment_name',
      hideInTable: true,
      search: false,
    },
    {
      title: '备注',
      dataIndex: 'remark',
      key: 'remark',
      hideInTable: true,
      search: false,
    },
    {
      title: '操作',
      valueType: 'option',
      width: 140,
      render: (text, record, _, action) => {
        let isdelete =
          record.actual_receive == 0
            ? [
                <Popconfirm
                  placement="bottom"
                  title={'确认删除该结算单？'}
                  onConfirm={() => {
                    postFetch({
                      url: '/wbn-api/settle/' + record.id,
                      params: {},
                      method: 'DELETE',
                    }).then((res) => {
                      if (res.code == 0) {
                        message.success('操作成功');
                        Modal.confirm({
                          title: '是否立即新增收款单',
                          message: '续单少于2条时，建议立即新增收款单',
                          okText: '确认',
                          cancelText: '取消',
                          onOk: () => {
                            reload();
                            history.push({
                              pathname: `/finance/receipt`,
                              query: {
                                id: record.company_id,
                                receivable: record.receivable,
                                service: [
                                  record.service_end_time
                                    ? moment(record.service_end_time)
                                    : moment(),
                                  null,
                                ],
                                service_type: record.service_type,
                              },
                            });
                          },
                          onCancel: () => {
                            reload();
                          },
                        });
                      }
                    });
                  }}
                  okText="删除"
                  cancelText="取消"
                >
                  <a style={{ color: '#f50' }}>删除</a>
                </Popconfirm>,
              ]
            : [];
        return [
          <a
            style={{ color: '#1890ff' }}
            onClick={() => {
              history.push({
                pathname: `/finance/receipt`,
                query: {
                  id: record.company_id,
                  receivable: record.receivable,
                  service: [
                    record.service_start_time ? moment(record.service_start_time) : moment(),
                    record.service_end_time ? moment(record.service_end_time) : moment(),
                  ],
                  service_type: record.service_type,
                },
              });
            }}
          >
            添加收款单
          </a>,
          ...isdelete,
        ];
      },
    },
  ];

  const columnes = [
    {
      title: '公司名称',
      width: 260,
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '公司法人',
      dataIndex: 'legal_person',
      key: 'legal_person',
      search: false,
      hideInTable: true,
    },
    {
      title: '公司地址',
      dataIndex: 'address',
      key: 'address',
      search: false,
      hideInTable: true,
    },
    {
      title: '统一社会信用代码',
      dataIndex: 'enterprise_credit_code',
      key: 'enterprise_credit_code',
      search: false,
      hideInTable: true,
    },
    {
      title: '公司营业执照',
      dataIndex: 'origin_url',
      key: 'origin_url',
      render: (_, row) => {
        return <Image width={32} height={32} style={{ padding: 2 }} src={row.origin_url}></Image>;
      },
      hideInTable: true,
      search: false,
    },
    {
      title: '联系人',
      dataIndex: 'customer_name',
      key: 'customer_name',
      ellipsis: true,
    },
    {
      title: '联系人手机号',
      width: 120,
      dataIndex: 'customer_phone',
      key: 'customer_phone',
      render: (_, row) => (
        <Tooltip title={row.customer_phone}>
          <a href={`tel:${row.customer_phone}`} className="oneline">
            {row.customer_phone}
          </a>
        </Tooltip>
      ),
    },
    {
      title: '区域名称',
      dataIndex: 'area_name',
      key: 'area_name',
      search: false,
    },
    {
      title: '区域编码',
      dataIndex: 'area_code',
      key: 'area_code',
      search: false,
      hideInTable: true,
    },
    {
      title: '接单人',
      dataIndex: 'user_name',
      key: 'user_name',
      search: false,
    },
    {
      title: '促单人',
      dataIndex: 'promoter_user_name',
      key: 'promoter_user_name',
      search: false,
    },
    {
      title: '公司类型',
      dataIndex: 'classify_name',
      key: 'classify_name',
      search: false,
    },
    {
      title: '月收费',
      dataIndex: 'unit_price',
      key: 'unit_price',
      search: false,
    },
    {
      title: '活动',
      dataIndex: 'activity_content',
      key: 'activity_content',
      search: false,
      hideInTable: true,
    },
    {
      title: '续单',
      dataIndex: 'is_create_order',
      key: 'is_create_order',
      search: false,
      render: (_, row) => <span>{row.is_create_order ? '是' : '否'}</span>,
    },
    {
      title: '会计流程',
      dataIndex: 'is_accountant',
      key: 'is_accountant',
      search: false,
      render: (_, row) => <span>{row.is_accountant ? '是' : '否'}</span>,
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      valueEnum: valueEnum,
      width: 120,
      render: (dom, row) => (
        <div
          style={{
            color: row?.status?.indexOf('refuse') != -1 ? 'red' : 'auto',
            cursor: 'pointer',
          }}
        >
          {valueEnum[row?.status]?.text}
        </div>
      ),
    },
    {
      title: '合同协议',
      dataIndex: 'contracts',
      key: 'contracts',
      search: false,
      render: (_, row) => {
        if (!row.contracts) {
          return (
            <Image
              width={32}
              height={32}
              style={{ padding: 2 }}
              src={require('@/assets/default.png')}
            ></Image>
          );
        } else {
          return row.contracts.map((it) => {
            return (
              <Image width={32} height={32} src={it.origin_url} style={{ padding: 2 }}></Image>
            );
          });
        }
      },
      hideInTable: true,
    },
  ];

  let extrarender = [
    <div
      className="action"
      title="导出"
      style={{ background: '#ff4800' }}
      onClick={() => {
        const hide = message.loading('正在导出..', 0);
        let julu = formRef?.current?.getFieldValue() ?? {};
        getFetch({ url: '/wbn-api/settle/batch_import', params: { ...julu } }).then((res) => {
          if (res?.data) {
            window.open(res?.data);
          }
          hide();
        });
      }}
    >
      <DownloadOutlined />
    </div>,
  ];

  return (
    <div className="pgcontainer">
      <AutoTable
        pageextra={extrarender} //页面操作 新增or批量删除
        pagetitle={props.route.name} //页面标题
        columns={columns}
        actionRef={actionRef}
        formRef={formRef}
        onRef={(node) => (ChildRef = node)}
        path="/wbn-api/settle/account_reward"
        childposition="top"
        tabledata={(data) => {
          cd(data);
        }}
        //withCard={false}
        //cardtitle = "name" //卡片标题
        //cardavatar = "img_url" //卡片头像
      >
        <Alert
          style={{ marginTop: 6 }}
          message={`合计:收费${data?.company_number ?? 0}户,应收金额${
            data?.total_receivable ?? 0
          }元`}
          type="info"
          showIcon
          closable={false}
        />
      </AutoTable>

      <Modal
        maskClosable={false}
        title={iftype.title}
        visible={vis}
        onCancel={() => cvis(false)}
        footer={false}
        width={1400}
        destroyOnClose={true}
      >
        <ProDescriptions
          title={`${iftype?.curitem?.name}的详细信息`}
          columns={[...columnes]}
          column={{ xs: 1, sm: 1, md: 2, lg: 3, xl: 4, xxl: 5 }}
          dataSource={iftype?.curitem}
        />
      </Modal>
    </div>
  );
}

export default connect(({ business, loading }) => ({
  business,
  loading,
}))(Accountrenew);
